<script setup>
import {Plus} from '@element-plus/icons-vue'
import {ref} from "vue"
import 'element-plus/theme-chalk/el-message.css'
import {ElMessage} from "element-plus";
import {gameViewImageUploadAPI, gameViewVideoUploadAPI} from "@/api/AdminApi/game.js";

const gameViewImageList = ref([])
const gameViewVideoList = ref([])

// 添加图片
const addImage = async (uploadFile) => {
  if (uploadFile) {
    const imageFile = uploadFile.raw || uploadFile; // 根据你的框架或库可能需要调整
    // 检查文件是否为 JPG 格式
    if (imageFile.type !== 'image/jpeg') {
      ElMessage.error('文件格式必须是jpg!')
      return;
    } else if (imageFile.size / 1024 / 1024 > 10) {
      ElMessage.error('文件大小不得超过 10MB!')
      return false
    }
    const newImage = {
      url: String,
      file: Object
    };
    newImage.url = URL.createObjectURL(imageFile)
    newImage.file = imageFile
    gameViewImageList.value.push(newImage);
  }
}

// 删除图片
const handleImageDelete = (url) => {
  gameViewImageList.value = gameViewImageList.value.filter(image => image.url !== url);
}

// 添加视频
const addVideo = async (uploadFile) => {
  if (uploadFile) {
    const videoFile = uploadFile.raw || uploadFile;
    if (videoFile.type !== 'video/webm') {
      ElMessage.error('文件格式必须是webm!')
      return;
    }
    const newVideo = {
      url: String,
      file: Object
    };
    newVideo.url = URL.createObjectURL(videoFile)
    newVideo.file = videoFile
    gameViewVideoList.value.push(newVideo);
  }
}

// 删除视频
const handleVideoDelete = (url) => {
  gameViewVideoList.value = gameViewVideoList.value.filter(video => video.url !== url);
}

// 长传
const submit = async (gameId) => {
  let lastResCode = null;
  // 依次上传
  for (let i = 0; i < gameViewImageList.value.length; i++) {
    const image = gameViewImageList.value[i]
    const res = await gameViewImageUploadAPI(gameId, image.file)
    lastResCode = res.code
    if (lastResCode !== 1) {
      ElMessage.error(res.msg)
      break; // 如果不是1，跳出循环
    }
  }
  for (let i = 0; i < gameViewVideoList.value.length; i++) {
    const video = gameViewVideoList.value[i]
    const res = await gameViewVideoUploadAPI(gameId, video.file)
    lastResCode = res.code
    if (lastResCode !== 1) {
      ElMessage.error(res.msg)
      break; // 如果不是1，跳出循环
    }
  }
  return lastResCode;
}

const validate = () => {
  if (gameViewImageList.value.length === 0) {
    return false;
  }
}

defineExpose({
  submit:submit,
  validate:validate
})

</script>

<template>
  <el-form>
    <el-form-item>
      <div
          class="outContainer"
          v-for="(item, index) in gameViewImageList"
          :key="index">
        <div class="image-container">
          <el-image class="image" :src="item.url" :preview-src-list="[item.url]"/>
          <el-button size="small" class="delete-button" @click="handleImageDelete(item.url)">删除图片</el-button>
        </div>
      </div>
      <el-upload
          class="icon-uploader"
          :auto-upload="false"
          :show-file-list="false"
          :on-change="addImage">
        <el-icon class="icon-uploader-icon">
          <Plus/>
        </el-icon>
      </el-upload>
    </el-form-item>
    <el-form-item>
      <div>视频地址：</div>
    </el-form-item>
    <el-form-item v-for="(item, index) in gameViewVideoList" :key="index">
      {{ item.file.name }}
      <el-button
          style="margin-left: 20px"
          type="danger"
          size="small"
          @click="handleVideoDelete(item.url)">
        删除视频
      </el-button>
    </el-form-item>
    <el-form-item>
      <el-upload
          :auto-upload="false"
          :show-file-list="false"
          :on-change="addVideo">
        <el-button size="large" type="primary">添加视频</el-button>
        <template #tip>
          <div class="el-upload__tip">
            视频为.webm结尾的视频文件
          </div>
        </template>
      </el-upload>
    </el-form-item>
  </el-form>
</template>

<style lang="scss" scoped>
.outContainer {
  padding: 10px;

  .image-container {
    position: relative;
    display: inline-block;
    overflow: hidden;

    .image {
      display: block;
      width: 190px;
    }

    .delete-button {
      position: absolute;
      left: 60px;
      bottom: -30px;
      background-color: red;
      color: $backgroundColor;
      transition: all 0.5s;
    }
  }

  .image-container:hover .delete-button {
    bottom: 5px;
  }
}

.icon-uploader {
  :deep {
    .el-upload {
      width: 190px;
      height: 100px;
      margin: 10px;
      border: 1px dashed var(--el-border-color);
      border-radius: 6px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
      transition: var(--el-transition-duration-fast);
    }

    .el-upload:hover {
      border-color: var(--el-color-primary);
    }

    .el-icon.icon-uploader-icon {
      font-size: 40px;
      color: #8c939d;
      width: 278px;
      height: 278px;
      text-align: center;
    }
  }
}
</style>
